<template>
  <div class="success-container">
    <div class="success-icon">
      <check-circle-filled />
    </div>
    <h1>支付成功！</h1>
    <p>您的车票已购买成功，可以在"我的订单"中查看详情。</p>
    <div class="action-buttons">
      <a-button type="primary" @click="goToOrders">查看订单</a-button>
      <a-button @click="goToHome">返回首页</a-button>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { CheckCircleFilled } from '@ant-design/icons-vue';

export default defineComponent({
  name: "OrderSuccess",
  components: {
    CheckCircleFilled
  },
  setup() {
    const router = useRouter();

    const goToOrders = () => {
      router.push('/myTicket');
    };

    const goToHome = () => {
      router.push('/');
    };

    return {
      goToOrders,
      goToHome
    };
  },
});
</script>

<style scoped>
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 20px;
}

.success-icon {
  font-size: 64px;
  color: #52c41a;
  margin-bottom: 20px;
}

.success-container h1 {
  margin: 0 0 15px 0;
  color: #2d3748;
  font-size: 28px;
}

.success-container p {
  color: #718096;
  font-size: 16px;
  margin-bottom: 30px;
}

.action-buttons {
  display: flex;
  gap: 15px;
}

@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
  }
}
</style>